<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="vue.js" charset="UTF-8" ></script>
	</head>
	<body>
		<div id = "app">
			{{msg}}
			<p>Using mustaches:{{rawHtml}}</p>
			<p>Using v-html directive:<span v-html="rawHtml"></span></p>
			<div v-bind:class = "color">test...</div>
			<p>{{number + 1}}</p>
			<p>{{ok?'yes':'no'}}</p>
			<p>{{message.split(' ').reverse().join()}}</p>
			<p v-if="seen">现在你看到我了</p>
			<a v-bind:href="url">...</a>
			<div @click="click1">
				<div @click="click2">
					click me
				</div>
				
			</div>
			<div class="test"
				v-bind:class = "[isActive ? 'active':'',isGreen?'green':'']"
				style="width: 200px;height: 200px; text-align: center;line-height: 200px; color: green;font-size: 30px;">
				hi vue
			</div>
			<div
				:style = "{color:color,fontSize:size,background:isRed?'#ff0000':''}">
				hi vue
			</div>
			<div>
				<div v-if="type==='A'">
					A
				</div>
				<div v-else-if="type==='B'">
					B
				</div>
				<div v-else-if="type==='C'">
					C
				</div>
				<div v-else>
					Not A/B/C
				</div>
				<h1 v-show="ok">Hello!</h1>
				
			</div>
			<div>
				<ul>
					<li v-for="item,index in items":key="index">
						{{index}}->{{item.message}}
					</li>
				</ul>
				<ul>
					<li v-for="value,key in object":key="key">
						{{key}}:{{value}}
					</li>
				</ul>
			</div>
			<div id="example-1">
				<button v-on:click="counter+=1">数值：{{counter}}</button><br />
				<button v-on:dblclick="greet('abc',$event)">Greet</button>
			</div>
			<div>
				<!--
                	阻止单击事件继续传播
                -->
				<a v-on:click.stop="doThis"></a>
				<!--提交事件不在重载页面-->
				<form v-on:submit.prevent="onSubmit"></form>
				<!--修饰符可以串联-->
				<a v-on:click.stop.prevent="doThat"></a>
				<!--只有修饰符-->
				<form v-on:click.prevent></form>
				<!--添加事件监听时使用事件捕获模式-->
				<!--即元素自身触发的事件先在此处理，然后才由内部元素进行处理-->
				<div v-on:click.capture="doThis">...</div>
				<!--只有在event.target是当前元素自身是触发处理函数-->
				<!--即事件不是从内部元素触发的-->
				<div v-on:click.self="doThat">...</div>
			</div>
			<div id = "example-2">
				<input v-model="message1" placeholder="edit me"/>
				<p>Message is :{{message1}}</p>
				<textarea v-model="message2" placeholder="add multiple lines"></textarea>
				<p style="white-space:pr-line;">{{message2}}</p>
				<br />
				<div>
					
					<input type="checkbox" id="jack" value="Jack" v-model="checkedNames"/>
					<label for="john">Jack</label>
					<input type="checkbox" id="john" value="John" v-model="checkedNames"/>
					<label for="john">John</label>
					<input type="checkbox" id="mike" value="Mike" v-model="checkedNames"/>
					<label for="john">Mike</label>
				
					<br />
					<span>Checked names:{{checkedNames}}</span>
				</div>
				<div style="margin-top:20px;">
					<input type="radio" id="one" value="one" v-model="picked"/>
					<lable for="one">One</lable>
					<br>
					<input type="radio" id="two" value="Two" v-model="picked"/>
					<label for="two">Two</label><br />
					<span>Picked:{{picked}}</span>
				</div>
				<button type="button" @click="submit">提交</button>
			</div>
			<div>
				<button-counter title="title1"></button-counter>
				<button-counter title="title2"></button-counter>
				
			</div>
			
		</div>
		
		
		<script type="text/javascript">
			
			var app = new Vue({
				el:'#app',
				data:{
					msg:"hi vue",
					rawHtml:'<span style="color:red;">this is should be red!</span>',
					color:'blue',
					number:10,
					ok:1,
					message:'hello vue!',
					seen:false,
					url:"https://cn.vuejs.org/v2/guide/syntax.html#%E6%8C%87%E4%BB%A4",
					isActive:true,
					isGreen:true,
					color:'#ffffff',
					size:'50px',
					isRed:true,
					type:"A",
					ok:true,
					items:[
					{message:'Foo'},
					{message:'Bar'}
					],
					object:{
						title:'How to do lists in Vue',
						author:'Jane Doe',
						publishedAt:'2016-04-10'
						
					},
					counter:0,
					name:"vue",
					message1:"test",
					message2:"h1",
					checkedNames:['Jack','Mike'],
					picked:"Two"
					
						
						
					
					
				},
				methods:{
					greet:function(str,e){
						alert('hi');
						alert(e);
						console.log(e);
					},
					click1:function(){
						console.log('click1......');
					},
					click2:function(){
						console.log('click2......');
					},
					submit:function(){
						console.log(this.message1);
						var postObj={
							msg1:this.message1,
							msg2:this.message2,
							checkval:this.checkedNames
						};
						console.log(postObj);
						
					}
				}
			});
			
			Vue.component('button-counter',{
				data:function(){
					return{
						count:0
					}
				},
			template:'<div><h1>hi...</h1><button v-on:click="clickfun">{{title}}You clicked me {{count}} times.</button></div>',
			methods:{
				clickfun:function(){
					this.count++;
				}
			}
			});
			
			
		</script>
		<style type="text/css">
			.red{color:red;}
			.blue{color:blue;font-size:100px;}
			.test{font-size: 35px;}
			.green{color:#00ff00}
			.active{background:#ff0000}
		</style>
	</body>
</html>
